<template>
	<view class="third">
		<view class="third-tab">
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
				swiperWidth="750" active-color="#000000" inactive-color="#999999" bar-width="120" bar-height="2"
				height="60"></u-tabs-swiper>
		</view>
		<swiper class="third-swiper" :current="swiperCurrent" @transition="transition"
			@animationfinish="animationfinish">
			<swiper-item class="third-swiper-item" v-for="(sta, index) in list" :key="index">
				<scroll-view scroll-y style="height: calc(100vh - 60rpx); width: 100%" @scrolltolower="onreachBottom">
					<view class="bd">
						<template v-if="data.length > 0">
							<Products :list="data" />
						</template>
						<template v-else>
							<view class="bd-tips">
								谢谢你对该品牌的关注，我们会尽快整理上线！
							</view>
						</template>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		thirdGoods,
		searchGoods
	} from "@/utils/api";
	import Products from '@/components/products/index.vue'
	export default {
		data() {
			return {
				title: "",
				key: 0,
				data: [],
				id: "",
				type: "",
				list: [{
						name: "综合排序",
						value: "all",
					},
					{
						name: "时间排序",
						value: "createtime",
					},
					{
						name: "价格排序",
						value: "original ",
					},
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				cur: 1, // 当前页
				total: 0, // 总页数
			};
		},
		components: {
			Products
		},
		onLoad({
			type,
			id,
			name
		}) {
			this.id = id;
			this.type = type;
			console.log("type=====", type);
			type == "normal" ? this.initList() : this.initSearch();
			this.title = name || id;
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.title,
			});
		},
		methods: {
			initList() {
				thirdGoods({
					page: this.cur,
					id: this.id,
					sort: this.list[this.current].value,
				}).then((resp) => {
					console.log("商品信息", resp);
					if (resp.code == 200) {
						this.total = resp.data.last_page;
						if (this.cur > 1) {
							// this.data[this.current].push(...resp.data.data)
							this.data.push(...resp.data.data);
						} else {
							// this.data[this.current] = resp.data.data;
							this.data = resp.data.data;
						}
						console.log(this.data);
					}
				});
			},
			initSearch() {
				searchGoods({
					page: this.cur,
					text: this.id,
					sort: this.list[this.current].value,
				}).then((resp) => {
					console.log("商品信息", resp);
					if (resp.code == 200) {
						this.total = resp.data.last_page;
						if (this.cur > 1) {
							// this.data[this.current].push(...resp.data.data)
							this.data.push(...resp.data.data);
						} else {
							// this.data[this.current] = resp.data.data;
							this.data = resp.data.data;
						}
						console.log(this.data);
					}
				});
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;

				// 更换列表内容
				this.key++;
				this.cur = 1;
				// this.data=[[],[],[]]
				// this.initList();
				this.type == "normal" ? this.initList() : this.initSearch();
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.cur < this.total) {
					++this.cur;
					// this.initList();
					this.type == "normal" ? this.initList() : this.initSearch();
				}
			},
			// 商品详情
			viewInfo(id) {
				uni.navigateTo({
					url: "/pages/goodsDetails/goodsDetails?id=" + id,
				});
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}

	.third {
		&-tab {}

		&-swiper {
			width: 100%;
			height: calc(100vh - 60rpx);

			&-item {
				.bd {
					width: 100%;
					flex-wrap: wrap;
					box-sizing: border-box;
					padding: 20rpx 0;

					&-tips {
						text-align: center;
						padding: 30rpx 0;
						width: 100%;
					}

					.item {
						width: 330rpx;
						background-color: #ffffff;
						margin-bottom: 28rpx;

						.cover {
							width: 100%;
							height: 315rpx;
						}

						.name {
							font-size: 26rpx;
							line-height: 55rpx;
							width: 100%;
							box-sizing: border-box;
							padding: 0 10rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							// text-align: center;
						}

						.price {
							display: flex;
							align-items: flex-end;

							// line-height: 70rpx;
							// justify-content: center;
							.cur {
								font-size: 36rpx;
								font-weight: bold;
								padding: 0 10rpx;
							}

							.old {
								font-size: 30rpx;
								text-decoration: line-through;
							}
						}
					}
				}
			}
		}

		&-bd {
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			box-sizing: border-box;
			padding: 30rpx 30rpx 0 30rpx;
			justify-content: space-between;

			.item {
				width: 330rpx;
				background-color: #ffffff;
				margin-bottom: 28rpx;

				.cover {
					width: 100%;
					height: 315rpx;
				}

				.name {
					font-size: 26rpx;
					line-height: 55rpx;
					width: 100%;
					box-sizing: border-box;
					padding: 0 10rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					// text-align: center;
				}

				.price {
					display: flex;
					align-items: flex-end;
					line-height: 70rpx;

					// justify-content: center;
					.cur {
						font-size: 36rpx;
						font-weight: bold;
						padding: 0 10rpx;
					}

					.old {
						font-size: 30rpx;
						text-decoration: line-through;
					}
				}
			}
		}
	}
</style>
